<script lang="ts" setup>
import { TableHeaderInfo } from './interface/table-header-info'
import { TableData } from './interface/table-data'
import { computed, ref } from 'vue';

const props = defineProps<{
    headerInfo: Array<TableHeaderInfo>
    data: Array<TableData>
}>()

const showDisableData = ref(false)

const showData = computed(() => {
    if(showDisableData.value) {
        return props.data
    }
    return props.data.filter(item => item.mode === 'enable')
})

const changeShowDisableData = () => {
    showDisableData.value = !showDisableData.value
}

</script>

<template>
    <table class="func-table">
        <thead>
            <tr>
                <th v-for="info in props.headerInfo" :key="info.name">{{ info.value }}</th>
            </tr>
        </thead>
        <tbody>
            <tr v-for="(item, i) in showData" :key="i">
                <td v-for="info in props.headerInfo" :key="info.name">
                    <slot :name="info.name" :item="item"></slot>
                </td>
            </tr>
        </tbody>
    </table>
    <button class="func-table-btn" @click="changeShowDisableData">
        {{ showDisableData ? '收缩未支持列表' : '展开未支持列表' }}
    </button>
</template>

<style scoped>
.func-table td {
    text-align: center;
}
.func-table thead tr > th:first-child {
    min-width: 145px;
}
.func-table-btn {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-left: auto;
    line-height: 1;
    height: 32px;
    white-space: nowrap;
    cursor: pointer;
    color: #606266;
    outline: none;
    transition: .1s;
    font-weight: 500;
    user-select: none;
    background-color: #fff;
    border: 1px solid #dcdfe6;
    padding: 8px 15px;
    font-size: 14px;
    border-radius: 4px;
}
.func-table-btn:hover, .func-table-btn:focus {
    color: #409eff;
    border-color: #c6e2ff;
    background-color: #ecf5ff;
}
.func-table-btn:active {
    color: #409eff;
    border-color: #409eff;
    background-color: #ecf5ff;
}

</style>